<template>
  <div class="father">
    <h3>父组件</h3>
    <h3>房屋数量 {{ house }}</h3>
    <button @click="getAllChild($refs)">子组件加上3本书</button>
    <Child1 ref="c1" />
    <Child2 ref="c2" />
  </div>
</template>

<script setup lang="ts" name="Father">
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
import { ref } from 'vue'

let c1 = ref()
let c2 = ref()

// 数据
let house = ref(4)
// 方法
function changeToy() {
  c1.value.toy = '小猪佩奇'
}
function changeComputer() {
  c2.value.computer = '华为'
}
function getAllChild(refs: { [key: string]: any }) {
  for (let key in refs) {
    refs[key].book += 3
  }
}
// 向外部提供数据
defineExpose({ house })
</script>

<style scoped>
reference .father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
</style>
